<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all"/>
    <link rel="stylesheet" href="../../common/css/user.css" media="all"/>
</head>

<body class="childrenBody">

<!--搜索栏-->
<blockquote class="layui-elem-quote news_search">
    <form class="layui-form" lay-filter="example_query">

        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="mobile" placeholder="">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="username" placeholder="">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="name" placeholder="">
            </div>
        </div>

        <div class="layui-inline">
            <a class="layui-btn search_btn" lay-submit="" lay-filter="query" style="margin-left: 20px">查询</a>
        </div>
        <div class="layui-inline">
            <button class="layui-btn search_btn" type="reset" style="margin-left: 20px">重置</button>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal add_btn" lay-submit="" lay-filter="add" style="margin-left: 20px">添加</a>
        </div>
    </form>
</blockquote>
<!--表格区-->
<div class="layui-form users_list">
    <!--通过lay-filter区分toolbar事件容器-->
    <table id="list-data" lay-filter="dataListFilter" class="layui-table">
    </table>
</div>
<!--分页元素-->
<div id="page"></div>
<!--toolbar 模板-->
<script type="text/html" id="barDemo">
    <!--通过lay-event定义事件-->
    <!--    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="details">详情</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--一般情况下，一个业务页面引入一个layui.js,config.js和业务js这三个js就够了-->
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
<script type="text/javascript" src="../../common/js/config.js"></script>


<script>
    layui.config({
        base: $config.resUrl + '/web/common/js/'//定义基目录
    }).extend({
        ajaxExtention: 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
        $tool: 'tool',
        $api: 'api'
    }).use(['laydate', 'form', 'layer', 'jquery', 'table', 'laypage', 'ajaxExtention', '$tool', '$api'], function () {

        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            $ = layui.jquery,
            laypage = layui.laypage,
            $tool = layui.$tool,
            laydate = layui.laydate,
            table = layui.table,
            $api = layui.$api;


        var tableIns;//表格实例

        /**
         * 定义表格
         * */
        function defineTable() {
            tableIns = table.render({
                elem: '#list-data'
                , id: 'dataTable'
                , height: 500
                , url: $tool.getContext() + '/expressMan/pageList' //数据接口
                , method: 'get'
                , page: true //开启分页
                , response: {
                    statusName: 'code'
                    , statusCode: 200
                },
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.data.totalCount, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'id',title:'主键ID', hidden: true}
                        ,{field: 'mobile',title:'手机号'}
                        ,{field: 'email',title:'邮箱'}
                        ,{field: 'name',title:'姓名'}
                        ,{field: 'password',title:'密码'}
                        ,{field: 'username',title:'账号'}
                        ,{fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                    ]
                ]
                , done: function (res, curr) {//请求完毕后的回调
                    //如果是异步请求数据方式，res即为你接口返回的信息.curr：当前页码
                }
            });

            //为toolbar添加事件响应
            table.on('tool(dataListFilter)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var row = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                //区分事件
                if (layEvent === 'del') { //删除
                    $api.doPost('/expressMan/delete', {id: row.id}, function (res) {
                        if (res.code == 200) {
                            tableIns.reload();
                            layer.msg("删除成功！", {time: 500});
                        } else {
                            layer.msg("删除失败！", {time: 500});
                        }
                    });
                } else if (layEvent === 'edit') {
                    layer.open({
                        type: 2
                        , title: "修改"
                        , area: ['650px','450px']
                        , shade: 0.1
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        // , btn: ['提交', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        // , content: $("#formDom")
                        , content: 'page/ExpressMan/ExpressManUpdate.html?id='+row.id
                        , success: function (layero, index) {
                            //获取新窗口对
                            /*form.render();
                            //获取数据
                            $api.doGet('/expressMan/selectByPrimaryKey', {id: row.id}, function (result) {
                                if (result.code != 200) {
                                    layer.close(index);
                                    layer.msg(result.msg, {time: 500});
                                    return;
                                }
                                form.val('example', result.data);
                            });*/

                        }
                        , yes: function () {

                        }
                        , end: function () {
                            reloadTable();
                        }
                    });

                } else if (layEvent === 'details') {

                }
            });
        }

        function reloadTable(){
            var reqData = form.val('example_query');
            //表格重新加载
            tableIns.reload({
                where: reqData
            });
        }

        defineTable();

        form.on("submit(query)", function (data) {
            reloadTable();
            return false;
        });

        form.on("submit(add)", function (data) {
            add();
            return false;
        });

        function add() {
            layer.open({
                type: 2
                , title: "新增"
                , area: ['650px','450px']
                , shade: 0.1
                , id: 'LAY_layuipro1'
                , btnAlign: 'c'
                , moveType: 1 //拖拽模式，0或者1
                , content: 'page/ExpressMan/ExpressManAdd.html?id='
                , success: function (layero, index) {
                }
                , yes: function () {
                }
                , end: function () {
                    reloadTable();
                }
            });
        }

    });
</script>
</body>

<form class="layui-form" action="" lay-filter="example" id="formDom" style="display: none; padding: 30px">
<!--    <div class="layui-form-item layui-margin-top">-->
<!--        <label class="layui-form-label">主键ID</label>-->
<!--        <div class="layui-input-block">-->
            <input type="hidden" name="id"
                   >
<!--        </div>-->
<!--    </div>-->

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="mobile" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
</form>

</html>